<template>
    <van-nav-bar
        title="设置"
        left-arrow
        @click-left="onClickLeft"
        class="custom-nav-bar"
    />
    <div class="overview-placeholder"></div>

    <div class="menu-list">
        <van-cell-group inset>
            <van-cell icon="friends-o" title="用户管理" is-link @click="onClickUser"/>
            <van-cell icon="bookmark-o" title="版本管理" is-link @click="onClickVersion" />
            <van-cell icon="info-o" title="关于我们" is-link @click="onClickAbout"/>
            <van-cell icon="smile-o" title="意见反馈" is-link @click="onClickSuggess"/>
        </van-cell-group>
    </div>
    <van-popup v-model:show="showVersionDialog"  position="bottom" :style="{ height: '40%' }">
        <van-tabs v-model:active="tabActive" @click-tab="onClickVersionTab">
            <van-tab title="版本信息">
                <div >
                    <van-cell-group inset>
                        <van-field v-model="currentVersion" label="赛季版本" readonly  />
                        <van-field v-model="userCount" label="用户数量" readonly  />
                    </van-cell-group>
                </div>
                
            </van-tab>
            <van-tab title="版本升级">
                <div class="tab-content">
                    <van-radio-group v-model="versionChecked" direction="horizontal">
                        <van-radio name="1">全新赛季</van-radio>
                        <van-radio name="2">指定赛季</van-radio>
                    </van-radio-group>
                    <van-cell-group inset v-if="versionChecked === '2'">
                        <van-field
                            v-model="inputVersion"
                            clearable
                            label="赛季值"
                            placeholder="请输入赛季"
                        />
                    </van-cell-group>
                        
                
                </div>
                
                <div class="bottom-button-container">
                    <van-button type="primary" block @click="onClickVersionUp">提交</van-button>
                </div>
            </van-tab>
        </van-tabs>
    </van-popup>

    <van-popup v-model:show="showPersionDialog"  position="bottom" :style="{ height: '80%' }">
        <van-tabs>
            <van-tab title="用户信息">
               <div class="person_list">
                <van-cell-group inset title="人员列表">
                    <van-cell v-for="person in userInfoList" :key="person.id">
                        <template #icon>
                        <van-image
                            round
                            width="40"
                            height="40"
                            :src="person.avatar"
                        />
                        </template>
                        <template #title>
                            <span class="custom-title">{{ person.name }}</span>
                        </template>
                        <template #right-icon>
                            <van-space>
                                <van-button
                                    name="1"
                                    type="danger"
                                    size="small"
                                    @click="personDelete(person)">删除</van-button>
                                <van-button
                                    type="primary"
                                    size="small"
                                    @click="personCharge(person)">充值</van-button>
                                <van-button v-if="person.status === 0"
                                    type="success"
                                    size="small"
                                    @click="personRegist(person)">注册</van-button>
                            </van-space>
                        </template>
                    </van-cell>
                    </van-cell-group>
               </div>
            </van-tab>
            <van-tab title="添加用户">
                <van-cell-group inset >
                    <van-field
                        v-model="addPersonNum"
                        clearable
                        label="人数"
                        placeholder="输入增加人数"
                    />
                </van-cell-group>
                <div class="bottom-button-container">
                    <van-button type="primary" block @click="onClickAddPerson">提交</van-button>
                </div>
            </van-tab>
        </van-tabs>
    </van-popup>
</template>

<script>
    import { ref } from 'vue';
    import { showToast } from 'vant';
    import { post , get} from '../../utils/request';
    export default {
        setup() {
            const showVersionDialog  = ref(false);
            const showPersionDialog  = ref(false);
            const versionChecked = ref('1');
            const currentVersion = ref('0');
            const userCount = ref('0');
            const inputVersion = ref('');
            const tabActive = ref('0');
            const userInfoList = ref([]);

            const onClickLeft = () => {
                history.back();
            }

            const onClickVersion = () =>{
                showVersionDialog.value = true;
                queryVersionInfo();
            }

            const onClickVersionTab = (index) =>{
                console.log(index);
                if (tabActive.value === 0) {
                    queryVersionInfo(); 
                }
            }

            const onClickUser = () =>{
                showPersionDialog.value = true;
                queryUserInfo();
            }

            const onClickAbout = () =>{
                showToast('功能开发中...');
            }

            const onClickSuggess = () =>{
                showToast('功能开发中...');
            }

            const onClickVersionUp = () =>{
                doVersionUp();
            }

            const onClickAddPerson = () =>{
                showToast('功能开发中...');
            }

            const personDelete = async(person) => {
                try {
                    const response = await get('/user/deleteUser/' + person.id); 
                    if (response && response.code === 200) {
                        showToast('删除成功');
                        queryUserInfo();
                    }else{
                        showToast('删除失败');
                    }
                }catch (error) {
                    console.error('Error fetching data:', error);
                }
               
            }

            const personCharge = (person) => {
                showToast('功能开发中...');
            }
            
            const personRegist = (person) => {
                showToast('功能开发中...');
            }
            const queryVersionInfo = async () => {
                try {
                    const response = await get('/user/versionInfo');
                    if (response && response.code === 200) {
                        currentVersion.value = response.data.currentVersion || 0;
                        userCount.value = response.data.userCount || 0;
                    } else {
                        console.error('Error fetching data:', response);
                    }
                } catch (error) {
                    console.error('Error fetching data:', error);
                }
            };

            const queryUserInfo = async () => {
                try {
                    const response = await get('/user/queryUserInfo');
                    if (response && response.code === 200) {
                        userInfoList.value = response.data || [];
                    } else {
                        console.error('Error fetching data:', response);
                    }
                } catch (error) {
                    console.error('Error fetching data:', error);
                }
            };

            const doVersionUp = async () => {
                try {
                    const response = await post('/user/version', {
                        type: versionChecked.value,
                        version: inputVersion.value,
                    });
                    if (response && response.code === 200) {
                        showToast('更新成功');
                    } 
                } catch (error) {
                    console.error('Error fetching data:', error);
                }
            };
        
            return {
                onClickLeft,
                onClickVersion,
                onClickUser,
                onClickAbout,
                onClickSuggess,
                onClickVersionUp,
                onClickVersionTab,
                personDelete,
                personCharge,
                personRegist,
                onClickAddPerson,
                showVersionDialog,
                showPersionDialog,
                versionChecked,
                currentVersion,
                userCount,
                inputVersion,
                tabActive,
                userInfoList
            }
        }
    }
</script>

<style scoped>
    .custom-nav-bar :deep(.van-icon-arrow-left) {
    color: black;
    }
    .custom-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    }

    .overview-placeholder {
        height: 50px; 
    }

    .menu-list {
        background-color: #ffffff;
        border-radius: 12px;
        margin: 12px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }

    .tab-content {
        border-radius: 12px;
        margin: 32px;
    }

    .bottom-button-container {
    position: fixed;
    bottom: 5px;
    left: 12px;
    right: 12px;
    }

    .bottom-button-container :deep(.van-button) {
    width: 100%;
    height: 40px;
    font-size: 16px;
    }

    .person_list {
        background-color: #ffffff;
        border-radius: 12px;
        margin: 12px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }
</style>
